<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="./layui/css/layui.css" rel="stylesheet">
  <script src="./layui/layui.js"></script>
  <style>
    .parent {
      width: 800px;
      height: 400px;
      /* background-color: aqua; */
      text-align: center;
      margin: 0 auto;
      overflow-y: scroll;
    }

::-webkit-scrollbar-track-piece { 
  background-color:red;
}
::-webkit-scrollbar {
  width:13px;
  height:13px;
}
::-webkit-scrollbar-thumb {
  background-color:blue;
  background-clip:padding-box;
  min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
  background-color:green;
}

  </style>
</head>

<body>
  <div class="parent">
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>

    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>

    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>

    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>

    <p>文字解析</p>
    <p>文字解析</p>



    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>

    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <p>文字解析</p>
    <div class="layui-row">
      <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">6/12</div>
      </div>
      <div class="layui-col-xs6">
        <div class="grid-demo">6/12</div>
      </div>
    </div>


    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">验证必填项</label>
        <div class="layui-input-block">
          <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">验证手机号</label>
          <div class="layui-input-inline layui-input-wrap">
            <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号"
              lay-affix="clear" class="layui-input demo-phone">
          </div>
          <div class="layui-form-mid" style="padding: 0!important;">
            <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <script>
    layui.use(['form', 'laydate', 'util'], function () {
      var form = layui.form;
      var layer = layui.layer;
      var laydate = layui.laydate;
      var util = layui.util;

      // 自定义验证规则
      form.verify({
        pass: function (value) {
          if (!/(.+){6,12}$/.test(value)) {
            return '密码必须 6 到 12 位';
          }
        }
      });

      // 指定开关事件
      form.on('switch(switchTest)', function (data) {
        layer.msg('开关 checked：' + (this.checked ? 'true' : 'false'), {
          offset: '6px'
        });
        layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
      });

      // 提交事件
      form.on('submit(demo1)', function (data) {
        var field = data.field; // 获取表单字段值
        // 显示填写结果，仅作演示用
        layer.alert(JSON.stringify(field), {
          title: '当前填写的字段值'
        });
        // 此处可执行 Ajax 等操作
        // …
        return false; // 阻止默认 form 跳转
      });

      // 日期
      laydate.render({
        elem: '#date'
      });

      // 普通事件
      util.on('lay-on', {
        // 获取验证码
        "get-vercode": function (othis) {
          var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增 
          // 验证通过
          if (isvalid) {
            layer.msg('手机号规则验证通过');
            // 此处可继续书写「发送验证码」等后续逻辑
            // …
          }
        }
      });
    });
  </script>
</body>

</html>